<template>
  <div>
    <div
      id="map"
      ref="chartContainer"
      :style="{width:boxSize+'px',height:boxSize+'px'}"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';

export default {
  data() {
    return {
      myChart: null,
      boxSize: 1000,
      minSize: 400,
      maxSize: 2800,
      currentSize: 800,
      ROOT_PATH: import.meta.env.BASE_URL
    };
  },
  mounted() {
    this.initChart();
  },
  beforeUnmount() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    initChart() {
      // 设置容器大小

      // 初始化 ECharts 实例
      this.myChart = echarts.init(this.$refs.chartContainer);

      // 读取 JSON 数据
      fetch(this.ROOT_PATH + 'data-gl/asset/data/flights.json')
        .then(response => response.json())
        .then(data => {
          this.renderChart(data);
        })
        .catch(error => {
          console.error('数据加载失败:', error);
        });
    },
    renderChart(data) {
      // 获取机场的坐标
      const getAirportCoord = (idx) => [data.airports[idx][3], data.airports[idx][4]];

      // 创建飞线数据 - 添加动画效果
      const routes = data.routes.map(airline => {
        const fromCoord = getAirportCoord(airline[1]);
        const toCoord = getAirportCoord(airline[2]);

        return {
          coords: [fromCoord, toCoord],
          // 飞线样式配置
          lineStyle: {
            color: this.getRandomColor(),
            width: 5,
            opacity: 0.6,
            curveness: 0.05 // 曲线程度
          },
          // 飞线特效
          effect: {
            show: true,
            period: 6, // 动画周期
            trailLength: 1, // 轨迹长度
            symbol: 'arrow', // 箭头形状
            symbolSize: 5,
            color: '#ffeb3b' // 飞线颜色
          }
        };
      });
      // 配置选项
      const option = {
        globe: {
          baseTexture: this.ROOT_PATH + 'data-gl/asset/world.topo.bathy.200401.jpg',
          // heightTexture: this.ROOT_PATH + 'data-gl/asset/bathymetry_bw_composite_4k.jpg',
          shading: 'lambert',
          realisticMaterial: {
            roughness: 0.9,
            metalness: 0.2
          },
          light: {
            ambient: {
              intensity: 0.7 // 降低环境光强度
            },
            main: {
              intensity: 0.4, // 稍微提高主光强度但保持柔和
              shadow: true,
            }
          },
          viewControl: {
            autoRotate: true,
            alpha: 60, beta: -70, distance: 200,
            zoomSensitivity: 1 // 缩放灵敏度
          },
          atmosphere: {
            show: true,
            color: 'rgba(100, 150, 200, 1)', // 设置大气层颜色，降低透明度
          },
          // 地球大小和位置配置
          globeRadius: 80,
          center: [0, 70, 0]
        },
        series: [
          {
            // 飞线系列
            type: 'lines3D',
            coordinateSystem: 'globe',
            blendMode: 'source-over',
            effect: {
              show: true,
              constantSpeed: 12, // 飞线速度
              trailWidth: 1,
              trailLength: 0.3,
              trailOpacity: 1,
              trailColor: '#ffeb3b'
            },
            lineStyle: {
              width: 5,
              color: 'rgb(50, 150, 250)',
              opacity: 1
            },
            data: routes,
            // 飞线动画配置
            progressive: 200,
            progressiveThreshold: 300
          },
        ]
      };

      this.myChart.setOption(option);
    },

    // 随机颜色生成
    getRandomColor() {
      const colors = [
        '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',
        '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43'
      ];
      return colors[Math.floor(Math.random() * colors.length)];
    }
  }
};
</script>

<style scoped>
#map {
  height: 100%;
  width: 100%;
}
</style>

<style scoped lang="scss">
#map {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}
</style>
